<template>
  <view>
    <!-- 列表 -->
    <scroll-view :scroll-y="true" style="height: 100%; width: 100%" class="container item one">
      <view class="container-body">
        <template v-if="courseList && courseList.length">
          <view class="u-flex u-flex-wrap">
            <view v-for="item in courseList" :key="item.id" class="u-flex-col pic-card">
              <view v-if="item.src.length !== 0" class="pic u-flex-col u-row-center u-col-center u-p-30">
                <u-image
                  class="card-pic"
                  border-radius="30"
                  width="320rpx"
                  height="240rpx"
                  :src="item.src[0]"
                  @click="viewPic(item.src,index)"
                ></u-image>
                <view class="pic-foot-one"></view>
                <view class="pic-foot-two"></view>
              </view>
              <view v-else class="pic u-flex-col u-row-center u-col-center u-p-30">
                <u-image class="card-pic" border-radius="30" width="320rpx" height="240rpx" :src="pic_miss"></u-image>
                <view class="pic-foot-three"></view>
                <view class="pic-foot-four"></view>
              </view>
              <text class="t-title f-bold u-font-md u-text-center">{{item.licenceName}}</text>
            </view>
          </view>
        </template>
        <template v-if="showEmpty">
          <view class="c-empty p-absolute-center">
            <u-empty text="暂无数据"></u-empty>
          </view>
        </template>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { BASE_IP, BASE_URL } from '@/utils/ip.js'
export default {
  name: 'index',
  props: {
    customerId: {
      type: String,
      default: ''
    },
    superviseIndustry: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      search: {
        archivesType: '2',
        customerId: '',
        industry: '',
        materialType: '003',
        type: '2'
      },
      pic_miss: require('@/static/image/picture_missing.png'),
      tagColor: ['#49BDCC', '#dd524d'],
      type: '1',
      state: '',
      coalMineName: '',
      triggered: false, // 下拉刷新
      showEmpty: false,
      courseList: [],
      BASE_IP: '',
      BASE_URL: ''
    }
  },
  mounted() {
    this.BASE_URL = BASE_URL
    this.BASE_IP = BASE_IP
    this.getData()
  },
  methods: {
    /**
     * 初始化
     */
    init() {
      this.showEmpty = false
    },
    viewPic(data, index) {
      uni.previewImage({
        current: index,
        urls: data,
        longPressActions: {}
      })
    },
    /**
     * 请求数据
     */
    async getData() {
      this.$set(this.search, 'customerId', this.customerId)
      this.$set(this.search, 'industry', this.superviseIndustry)
      const res = await this.$post('/mobile/enterpriseInfo/enLicence/dataList', this.search)
      if (res && res.body) {
        this.courseList = res.body
        for (let i = 0; i < this.courseList.length; i++) {
          for (let j = 0; j < this.courseList[i].src.length; j++) {
            // #ifdef  H5
            this.courseList[i].src[j] = BASE_IP + BASE_URL + 'system/archives/preview/thumb/' + this.courseList[i].src[j]
            // #endif
            // #ifndef H5
            this.courseList[i].src[j] = BASE_URL + '/system/archives/preview/thumb/' + this.courseList[i].src[j]
            // #endif
          }
        }
        // 数据空
        if (this.courseList && this.courseList.length === 0) this.showEmpty = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container-body {
  .pic-card {
    width: 50%;
    .pic {
      width: 100%;
      .card-pic {
      }
      .pic-foot-one {
        width: 256rpx;
        height: 20rpx;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        background: #c2ead6;
      }
      .pic-foot-two {
        width: 192rpx;
        height: 20rpx;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        background: #ddf1e7;
      }
      .pic-foot-three {
        width: 256rpx;
        height: 20rpx;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        background: #f8dcbf;
      }
      .pic-foot-four {
        width: 192rpx;
        height: 20rpx;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        background: #faecdc;
      }
    }
  }
}
</style>
